<div *ngFor="let item of events; index as i" class="item">
    <div class="item-remove">
        <button mat-icon-button (click)="onRemoveEvent(i)" class="remove">
            <mat-icon>clear</mat-icon>
        </button>
    </div>
    <div class="inbk" style="vertical-align: top;">
        <div class="my-form-field" style="width: 140px;">
            <span>{{'gauges.property-event-type' | translate}}</span>
            <mat-select [(value)]="item.type">
                <mat-option *ngFor="let ev of eventType | enumToArray" [value]="ev.key">
                    {{ ev.value }}
                </mat-option>
            </mat-select>
        </div>
        <div class="my-form-field" style="width: 140px;padding-left: 20px">
            <span>{{'gauges.property-event-action' | translate}}</span>
            <mat-select [(value)]="item.action" (change)="item.actparam = '';">
                <ng-container *ngIf="!isEnterOrSelect(item.type); else enterOrSelectAction">
                    <mat-option *ngFor="let type of actionType | enumToArray" [value]="type.key">
                        {{ type.value }}
                    </mat-option>
                </ng-container>
                <ng-template #enterOrSelectAction>
                    <mat-option *ngFor="let type of enterActionType | enumToArray" [value]="type.key">
                        {{ type.value }}
                    </mat-option>
                </ng-template>
            </mat-select>
        </div>
    </div>
    <div class="my-form-field" style="width: 240px;padding-left: 20px" *ngIf="withDestination(item.action)">
        <ng-container *ngIf="isWithPanel(item.action); else destination" class="inbk" style="vertical-align: top;">
            <div class="my-form-field block" style="width: 200px;">
                <span>{{'gauges.property-event-destination-panel' | translate}}</span>
                <mat-select [(value)]="item.actoptions.panelId">
                    <mat-option *ngFor="let panel of viewPanels; index as i" [value]="panel.id">{{panel.name}}</mat-option>
                </mat-select>
            </div>
            <div class="my-form-field block mt5" style="width: 200px;">
                <span>{{'gauges.property-event-destination' | translate}}</span>
                <mat-select [(value)]="item.actparam">
                    <mat-option *ngFor="let v of views; index as i" [value]="v.id">{{v.name}}</mat-option>
                </mat-select>
            </div>    
        </ng-container>
        <ng-template #destination>
            <div class="my-form-field lbk" style="width: 200px;">
                <span>{{'gauges.property-event-destination' | translate}}</span>
                <mat-select [(value)]="item.actparam">
                    <mat-option *ngFor="let v of views; index as i" [value]="v.id">{{v.name}}</mat-option>
                </mat-select>
            </div>
        </ng-template>
        <div *ngIf="withPosition(item.action)" class="table mt5">
            <div class="my-form-field lbk">
                <span>{{'general-x' | translate}}</span>
                <input numberOnly [(ngModel)]="item.actoptions.left" type="number" style="width: 60px">
            </div>
            <div class="my-form-field lbk ml10">
                <span>{{'general-y' | translate}}</span>
                <input numberOnly [(ngModel)]="item.actoptions.top" type="number" style="width: 60px">
            </div>
            <div *ngIf="cardDestination === item.action" class="my-form-field lbk ml10 tac" style="max-width: 70px;">
                <span>{{'gauges.property-event-single-card' | translate}}</span>
                <mat-slide-toggle color="primary" [(ngModel)]="item.actoptions.singleCard"></mat-slide-toggle>
            </div>
        </div>
    </div>
    <div *ngIf="destinationWithHideClose(item.action)" class="my-form-field lbk ml10 tac" style="max-width: 60px;">
        <span>{{'gauges.property-event-destination-hide-close' | translate}}</span>
        <mat-slide-toggle color="primary" [(ngModel)]="item.actoptions.hideClose"></mat-slide-toggle>
    </div>
    <div *ngIf="withDestination(item.action)" style="padding-left: 25px;">
        <flex-variables-mapping [(mapping)]="item.actoptions['variablesMapping']" [view]="getView(item.actparam)" [data]="data"></flex-variables-mapping>
    </div>
    <div style="display: inline-block" *ngIf="withSetInput(item.action)">
        <div class="my-form-field" style="width: 260px;padding-left: 20px;">
            <span>{{'gauges.property-event-input' | translate}}</span>
            <mat-select [(value)]="item.actparam">
                <mat-option *ngFor="let v of inputs; index as i" [value]="v.id">{{v.name}}</mat-option>
            </mat-select>
        </div>
    </div>
    <div style="display: inline-block" *ngIf="withSetValue(item.action)">
        <div class="my-form-field" style="padding-left: 20px;">
            <span>{{'gauges.property-event-value' | translate}}</span>
            <input [(ngModel)]="item.actparam" type="text" style="width: 180px">
        </div>
        <div class="my-form-field" style="padding-left: 13px;">
            <span>{{'gauges.property-event-function' | translate}}</span>
            <mat-select [(value)]="item.actoptions.function" style="width: 80px;">
                <mat-option *ngFor="let ev of setValueType | enumToArray" [value]="ev.key">
                    {{ ev.value }}
                </mat-option>
            </mat-select>
        </div>
    </div>
    <div style="display: block; padding-top: 5px;padding-left: 25px;"
        *ngIf="withToggleValue(item.action) || withSetValue(item.action) || withSetInput(item.action)">
        <flex-variable style="display: block" [data]="data" [(value)]="item.actoptions.variable" [withStaticValue]="false"></flex-variable>
    </div>
    <div style="display: inline-block" *ngIf="withAddress(item.action)">
        <div class="my-form-field" style="padding-left: 20px;">
            <span>{{'gauges.property-event-address' | translate}}</span>
            <input [(ngModel)]="item.actparam" type="text" style="width: 260px">
        </div>
        <div style="display: table; padding-left: 20px; padding-top: 5px;" *ngIf="withAddress(item.action)">
            <div class="my-form-field">
                <span>{{'gauges.property-event-width' | translate}}</span>
                <input numberOnly [(ngModel)]="item.actoptions.width" type="number" style="width: 60px">
            </div>
            <div class="my-form-field ml10">
                <span>{{'gauges.property-event-height' | translate}}</span>
                <input numberOnly [(ngModel)]="item.actoptions.height" type="number" style="width: 60px">
            </div>
            <div class="my-form-field ml10" *ngIf="withScale(item.action)">
                <span>{{'gauges.property-event-scale' | translate}}</span>
                <input numberOnly [(ngModel)]="item.actoptions.scale" type="number" style="width: 60px">
            </div>
            <div *ngIf="withPosition(item.action)" class="block mt5">
                <div class="my-form-field">
                    <span>{{'general-x' | translate}}</span>
                    <input numberOnly [(ngModel)]="item.actoptions.left" type="number" style="width: 60px">
                </div>
                <div class="my-form-field ml10">
                    <span>{{'general-y' | translate}}</span>
                    <input numberOnly [(ngModel)]="item.actoptions.top" type="number" style="width: 60px">
                </div>
            </div>
        </div>
    </div>
    <ng-container *ngIf="withRunScript(item.action)">
        <div class="my-form-field inbk" style="width: 260px;padding-left: 20px;">
            <span>{{'gauges.property-event-script' | translate}}</span>
            <mat-select [(value)]="item.actparam" (selectionChange)="onScriptChanged($event.value, item)">
                <mat-option *ngFor="let script of scripts; index as i" [value]="script.id">{{script.name}}</mat-option>
            </mat-select>
        </div>
        <div style="display: table; padding-top: 5px;">
            <div *ngFor="let scriptParam of item.actoptions['params']; index as i" style="padding-left: 10px; padding-top: 5px;">
                <div class="my-form-field">
                    <span>{{'gauges.property-event-script-param-name' | translate}}</span>
                    <input [(ngModel)]="scriptParam.name" type="text" style="width: 160px" readonly [disabled]="true">
                </div>
                <div style="margin-left: 10px; display: inline-block;">
                    <div class="my-form-field" *ngIf="scriptParam.type === 'value'">
                        <span>{{'gauges.property-event-script-param-value' | translate}}</span>
                        <ng-container *ngIf="!isEnterOrSelect(item.type); else enterParamValue">
                            <input [(ngModel)]="scriptParam.value" type="text" style="width: 260px">
                        </ng-container>
                        <ng-template #enterParamValue>
                            <input [(ngModel)]="scriptParam.value" 
                                placeholder="{{'gauges.property-event-script-param-input-value' | translate}}" 
                                type="text" 
                                style="width: 260px">
                        </ng-template>
                    </div>
                    <div class="my-form-field" *ngIf="scriptParam.type === 'tagid'">
                        <flex-variable style="display: block" (onchange)="setScriptParam(scriptParam, $event)" [data]="data" [variableId]="scriptParam.value" [withStaticValue]="false"></flex-variable>
                    </div>
                </div>
            </div>
        </div>
    </ng-container>
</div>